<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<style>
.class1{
  background: #444;
  color: #eee;
}
</style>
<body>
<div id="app">
<div v-html="message"></div>
</div>
<div id="app2">
<!-- for 属性规定 label 与哪个表单元素绑定 /-->
	<label for="r1">修改颜色</label>
	<input type="checkbox" v-model="class1" id="r1">
	<br><br>
	 <div v-bind:class="{'class1': class1}">
    directiva v-bind:class
  </div>
</div>
<script>
new Vue({

	el:"#app",
	data:{

	message:"<h1>操鸟教程</h1>"
	}
})

new Vue({

	el:"#app2",
	data:{
	class1:true
	}
	
})
</script>
</body>
</html>